import React, { Component } from 'react'
import Row, { RowInfo } from './components/Row';
import './index.scss';
import { Moment } from 'moment';

export interface Props {
    attendanceRecordItemModelList: RowInfo[];
    startDate: Moment | null;
    endDate: Moment | null;
    isValid: boolean;
    officialHolidays: number;
    onOpenDrawer?: () => void;
}

export default class AttendanceSheet extends Component<Props> {
    openDrawer = () => {
        if (typeof this.props.onOpenDrawer === 'function') {
            this.props.onOpenDrawer();
        }
    }

    render() {
        const totalDays = this.props.endDate !== null && this.props.startDate !== null ? this.props.endDate.diff(this.props.startDate, 'd') + 1 : 0;
        return (
            <div className={totalDays > 30 ? 'table more' : 'table less'}>
                <div className="table-head">
                    <h1 className="table-title">考勤记录表</h1>
                    <div className="tabel-description">
                        <span>考勤时间：{this.props.startDate?.format('YYYY年MM月DD日')} ~ {this.props.endDate?.format('YYYY年MM月DD日')}</span>
                        {
                            totalDays > 0 ?
                                (
                                    <span className="total-dyas">，共 {totalDays} 天</span>
                                ) : ''
                        }
                    </div>
                    <div className="date">
                        {
                            (() => {
                                const list: JSX.Element[] = [];
                                for (let i = 1; i <= totalDays; i++) {
                                    list.push(
                                        <span className="date-item">{i}</span>
                                    );
                                }
                                return list;
                            })()
                        }
                    </div>
                </div>
                <div className="table-body">
                    {
                        this.props.attendanceRecordItemModelList.map((rowInfo, index) => {
                            return (<Row key={index} worker={rowInfo.worker} attendanceRecordList={rowInfo.attendanceRecordList} officialHolidays={this.props.officialHolidays} />);
                        })
                    }
                </div>
            </div>
        );
    }
}
